<template>
  <div>
    <amap class="map" />
    <div class="input-box">
      <input type="text" class="search" placeholder="请输入关键字搜索" />
      <ul class="item">
        <!-- <li class="item-btn">邯郸县</li> -->
        <li class="item-btn">区/县</li>
        <li class="item-btn">乡/镇/街道</li>
        <li class="item-btn">村</li>
      </ul>
      <ul class="item-option-box">
        <li class="item-option town">
          <span value="cgbz">丛台区</span>
          <span value="zwz">邯山区</span>
          <span value="tbhz">复兴区</span>
          <span value="hacz">峰峰矿区</span>
          <span value="dsbx">肥乡区</span>
          <span value="dkbx">永年区</span>
          <span value="dltx">武安市</span>
          <span value="xwbx">临漳县</span>
          <span value="xscx">成安县</span>
          <span value="tpzx">大名县</span>
          <span value="whtx">涉县</span>
          <span value="xin1">磁县</span>
          <span value="xin2">邱县</span>
          <span value="xin3">鸡泽县</span>
          <span value="xin4">广平县</span>
          <span value="xin5">馆陶县</span>
          <span value="xin6">魏县</span>
          <span value="xin7">曲周县</span>
        </li>
        <li class="item-option cun"></li>
        <li class="item-option cuns"></li>
      </ul>
    </div>
  </div>
</template>

<script>
import Amap from "components/content/amap/Amap.vue";
export default {
  components: { Amap },
  name: "App",
  data() {
    return {};
  },
};
</script>
<style scoped lang="scss">

/deep/ .amap-maps {
  background: url(~assets/img/ksh/bg.png) no-repeat center center;
  background-size: 100% 100%;
  transform: translateY(-0rem);
}
.input-box {
  position: fixed;
  top: 9.375rem;
  left: 3.125rem;

  width: 21.875rem;
  height: 25rem;
  background: url(~assets/img/ksh/input-bg.png) no-repeat center center;
  background-size: 100% 100%;

  display: flex;
  flex-direction: column;
  align-items: center;
  .search {
    width: 80%;
    height: 2.5rem;
    margin: 3.125rem;
    border-radius: 1.25rem;
    border: 0.0125rem solid #195cc5;
    background: transparent url(~assets/img/ksh/search.png) no-repeat 95% center;
    background-size: 1.5625rem 1.5625rem;
    color: #fff;
    text-align: center;
    outline: none;
  }
  ::-webkit-input-placeholder {
    /* WebKit browsers */
    color: #fff;
    font-size: 0.875rem;
  }

  .item {
    width: 90%;
    display: flex;
    justify-content: space-evenly;
    li {
      width: 45%;
      line-height: 1.875rem;
      border: 0.025rem solid #018de7;
      border-radius: 0.625rem;
      text-indent: 0.5em;
      font-size: 0.875rem;
      color: #fff;
      cursor: pointer;
      background: url(~assets/img/ksh/pull.png) no-repeat 92% center;
      background-size: 0.5rem 0.5rem;
    }
  }
  .item-option-box {
    width: 90%;
    display: flex;
    justify-content: space-evenly;

    li {
      font-size: 0.75rem;
      width: 45%;
      height: 0rem;
      // border: 0.0125rem solid #018de7;
      border-radius: 0.625rem;
      overflow: auto;
      transition: 0.3s;
      cursor: pointer;
      span {
        display: block;
        width: 100%;
        padding: 0.0625rem 0;
        text-align: center;
        color: #fff;
        border-bottom: 0.0125rem solid #018de7;
      }
      span:hover {
        background: #018de7;
      }
    }
    li::-webkit-scrollbar {
      display: none;
    }
  }
}
</style>